<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="_fragment::head(~{::title},~{})">
    <title>详情</title>
</head>
<body>
<div th:replace="~{_fragment::blog-header('article')}"></div>

<!-- 内容区 -->
<div class="blog-content">
    <div class="layui-container">
        <div class="layui-row">
            <div class="layui-col-md8">
                <div class="base-card animated fadeIn">
                    <div class="article-title">
                        [[${article.title}]]
                    </div>
                    <div class="article-info">
                        <span class="layui-badge layui-bg-green" th:if="${article.isOriginal}">原创</span>
                        <span class="layui-badge" th:if="${!article.isOriginal}">转载</span>
                        <span class="fa fa-clock-o"> [[${#dates.format(article.createTime,'yyyy-MM-dd HH:mm:ss')}]]</span>
                        <span class="layui-icon layui-icon-username">[[${article.user.userName}]]</span>
                        <span class="fa fa-folder-o"><a href="#">[[${article.category.categoryName}]]</a></span>
                    </div>
                    <hr>
                    <div id="articleMdView" class="article-content" th:utext="${article.contentHtml}">
                        <!--                        <textarea style="display: none;">[[${article.contentMd}]]</textarea>-->
                    </div>
                    <div class="article-copyright">
                        <blockquote class="layui-elem-quote" th:if="${article.isOriginal}">
                            <p>版权声明：本文由[[${article.user.userName}]]原创，转载请标明出处！</p>
                            <p>本文链接：<a th:href="${#request.getRequestURL()}">[[${#request.getRequestURL()}]]</a></p>
                        </blockquote>
                        <blockquote class="layui-elem-quote" th:if="${!article.isOriginal}">
                            <p>本文转载自：<a th:href="${article.reprintUrl}">[[${article.reprintUrl}]]</a></p>
                        </blockquote>
                    </div>
                    <div class="article-tags">
                        <span class="fa fa-tag" th:each="tag:${article.tags}">
                            <a href="#">[[${tag.tagName}]]</a>
                        </span>
                    </div>
                    <hr/>
                </div>

                <!--EditorMdToHTML初始化-->
                <script th:src="@{/lib/editormd/lib/marked.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/prettify.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/raphael.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/underscore.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/sequence-diagram.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/flowchart.min.js}"></script>
                <script th:src="@{/lib/editormd/lib/jquery.flowchart.min.js}"></script>
                <script th:src="@{/lib/editormd/editormd.js}"></script>
                <link th:href="@{/lib/editormd/css/editormd.css}" rel="stylesheet">
                <script type="text/javascript" th:inline="javascript">
                    $(function () {
                        var editormdView;
                        editormdView = editormd.markdownToHTML("articleMdView", {
                            // markdown: ,
                            htmlDecode: "style,script,iframe",  // you can filter tags decode
                            //toc             : false,
                            // tocm            : true,    // Using [TOCM]
                            //tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
                            //gfm             : false,
                            //tocDropdown     : true,
                            emoji: true,
                            taskList: true,
                            tex: true,  // 默认不解析
                            flowChart: true,  // 默认不解析
                            sequenceDiagram: true,  // 默认不解析
                            codeFold: true
                        });

                    });
                </script>

                <div class="base-card animated slideInUp">
                    <fieldset class="layui-elem-field">
                        <legend>评论</legend>
                        <div class="layui-field-box">
                            <!-- 评论编辑器-->
                            <div class="blog-comment-box">
                                <div class="layui-form">
                                    <div class="layui-form-item">
                                        <textarea class="layui-textarea" id="blog-comment"
                                                  style="display: none"></textarea>
                                    </div>
                                    <div class="layui-form-item">
                                        <button id="btn-submit-comment" class="layui-btn">提交留言</button>
                                    </div>
                                </div>
                            </div>
                            <div class="blog-comment">
                                <ul>
                                    <li>
                                        <div class="comment-parent">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">张三</a></span>
                                                        <span class="content">哎哟，不错哦！！！</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-child">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">小郭</a></span>
                                                        <span>回复<a href="">@张三</a></span>
                                                        <span class="content">谢谢！</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-child">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">张三</a></span>
                                                        <span>回复<a href="">@小郭</a></span>
                                                        <span class="content">加油！！！</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="comment-parent">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">张三</a></span>
                                                        <span class="content">冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲冲</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-child">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">小郭</a></span>
                                                        <span>回复<a href="">@张三</a></span>
                                                        <span class="content">谢谢！</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="comment-child">
                                            <div class="comment-card">
                                                <div class="comment-card-body">
                                                    <img src="../static/img/default_avatar.png"/>
                                                    <div class="comment-info">
                                                        <span class="nickname"><a href="">张三</a></span>
                                                        <span>回复<a href="">@小郭</a></span>
                                                        <span class="content">加油！！水电费发发发发分萨芬是防守打法沙发萨芬是第三方士大夫士大夫沙发是的防守打法沙发是的发送到防守打法沙发发送发送大发斯蒂芬斯蒂芬士大夫士大夫士大夫是的发生萨达！</span>
                                                    </div>
                                                </div>
                                                <div class="comment-card-footer">
                                                    <span class="fa fa-clock-o">&nbsp;刚刚</span>
                                                    <span><a href="javascript:" onclick="reply(1232,'zhangsan')"
                                                             style="color: #009688;">回复</a></span>
                                                </div>
                                            </div>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </fieldset>
                </div>
            </div>
            <div class="layui-col-md4">
                <!-- 热文推荐 -->
                <div class="base-card animated bounceInRight">
                    <div class="base-card-header">
                        <i class="layui-icon layui-icon-fire"></i>
                        热文推荐
                        <span style="float: right;">
									<a href="">more<i class="layui-icon layui-icon-right"></i></a>
								</span>
                    </div>
                    <div class="base-card-body">
                        <ul class="hot-blog">
                            <li>
                                <span class="layui-badge">1</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                            <li>
                                <span class="layui-badge layui-bg-orange">2</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                            <li>
                                <span class="layui-badge layui-bg-orange">3</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                            <li>
                                <span class="layui-badge layui-bg-blue">4</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                            <li>
                                <span class="layui-badge layui-bg-blue">5</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                            <li>
                                <span class="layui-badge layui-bg-blue">6</span>
                                <a href="">基于springboot开发的个人博客</a>
                            </li>
                        </ul>
                    </div>
                </div>

                <!-- 标题 -->
                <div class="base-card animated bounceInRight delay-1s">
                    <div class="base-card-header">
                        <i class="fa fa-navicon "></i>
                        目录
                    </div>
                    <div class="base-card-body">
                        <ul>
                            <li>标题1</li>
                            <li>标题2</li>
                            <li>标题3</li>
                            <li>标题4</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div th:replace="_fragment::blog-footer"></div>


<link rel="stylesheet" type="text/css" th:href="@{/css/details.css}"/>
<script th:src="@{/js/global.js}" type="text/javascript" charset="utf-8"></script>
<script th:src="@{/js/details.js}" type="text/javascript" charset="utf-8"></script>
</body>
</html>
